<template>
  <div>
    <el-table ref="tableRef" row-key="id" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="性别" prop="sex"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
    </el-table>
  </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
import { ElTable } from 'element-plus';
import { nextTick } from 'vue';

type TableItem = { id: number; name: string; age: number; address: string; sex: string; }
const tableRef = ref<InstanceType<typeof ElTable>>()
const tableData = ref<TableItem[]>([])

tableData.value = new Array(10).fill(null).map((_, index) => {
  return {
    id: index,
    name: 'name' + index,
    age: index,
    address: 'address' + index,
    sex: Math.random() > 0.5 ? '男' : '女'
  }
})
console.log(tableData.value);
nextTick(() => {
  setTimeout(() => {
    // tableRef.value?.toggleRowSelection({
    //   "id": 0,
    //   "name": "name0",
    //   "age": 0,
    //   "address": "address0",
    //   "sex": "男"
    // })
    // tableRef.value?.toggleRowSelection(tableData.value[0])
    tableRef.value?.toggleRowSelection({id: 0})
  }, 1000)
})
const handleSelectionChange = (val: TableItem[]) => {
  console.log(val);
}
</script>
<style lang='scss' scoped></style>
